<template>
  <div ref="chart" style="width:100%;height:100%;" />
</template>

<script>
import * as echarts from 'echarts'
import { cloneDeep, groupBy } from 'lodash'
export default {
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      chartData: [],
      times: [],
      deptNames: [],
      timeer: null
    }
  },
  mounted() {
    this.initChart()
    this.timeer = setInterval(this.resizeChart, 500)
    // this.updateChart()
  },
  beforeDestroy() {
    clearInterval(this.timeer)
  },
  methods: {
    resizeChart() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    updateChart1(options) {
      if (this.chart) {
        this.chart.setOption(options)
      }
    },

    updateChart({
      xData,
      series
    }) {
      const _this = this
      this.$nextTick(() => {
        if (this.chart) {
          series = series.map(e => {
            return {
              name: e.name,
              type: 'line',
              data: e.data,
              showSymbol: false
            // areaStyle: {
            //   opacity: 0.2,
            //   color: 'rgba(24, 144, 255, 1)'
            // }
            }
          })
          this.chart.setOption({
            xAxis: {
              data: xData
            },
            series: series
          })
        } else {
          setTimeout(() => {
            this.updateChart()
          }, 10)
        }
      })
    },
    initChart() {
      const option = {
        colors: ['#2FC25B', '#1890FF'],
        grid: {
          top: 40,
          left: 20,
          right: 20,
          bottom: 20,
          containLabel: true
        },
        legend: {
          show: true,
          right: 30,
          top: 16
        //   textStyle: {
        //     color: '#00BCFF'
        //   }
        },
        xAxis: {
          z: 4,
          type: 'category',
          boundaryGap: false
          // axisLine: {
          //   lineStyle: {
          //     color: '#00BCFF'
          //   }
          // }
        },
        yAxis: {
          type: 'value',
          //   axisLabel: {
          //     color: '#00F6FF'
          //   },
          splitLine: {
            show: false
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: [
        ]
      }
      const myChart = echarts.init(this.$refs.chart)
      this.chart = myChart
      myChart.setOption(option)
    }
  }
}
</script>

